<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form :model="where" label-width="100px" class="ele-form-search" @keyup.enter.native="reload"
        @submit.native.prevent>
        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="中考考生报名号:">
              <el-input clearable v-model="where.examinee_number" placeholder="请输入中考考生报名号" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="学生姓名:">
              <el-input clearable v-model="where.name" placeholder="请输入学生姓名" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="身份证号:">
              <el-input clearable v-model="where.idcard" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="性别:">
              <el-radio-group v-model="where.gender" size="medium">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button :label="1">男</el-radio-button>
                <el-radio-button :label="2">女</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- <el-col :lg="8" :md="12">
            <el-form-item label="状态:">
              <el-radio-group v-model="where.status" size="medium">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button :label="1">启用</el-radio-button>
                <el-radio-button :label="2">停用</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="reload">查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :where="where" :datasource="url" :columns="columns" :selection.sync="selection"
        height="calc(100vh - 315px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button @click="removeBatch" type="danger" icon="el-icon-delete" class="ele-btn-icon" size="small"
            v-if="permission.includes('sys:member:dall')">批量删除
          </el-button>
          <!-- <el-button
            @click="openEdit(null)"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            size="small"
            v-if="permission.includes('sys:member:add')">添加考生报考信息
          </el-button> -->
          <el-button @click="handleExport()" type="primary" icon="el-icon-up" class="el-icon-download" size="small"
            v-if="permission.includes('sys:member:export')">导出记录
          </el-button>
        </template>
        <!-- 个人信息 -->
        <template slot="name" slot-scope="{ row }">
          <el-popover placement="top-start" title="学生信息" width="300" trigger="hover">
            <div>姓名: {{ row.name }}</div>
            <div>性别: {{ row.gender == 1 ? "男" : "女" }}</div>
            <div>年龄: {{ row.age }}</div>
            <div>出生年月: {{ row.birthday }}</div>
            <div>身份证号:{{ row.idcard }}</div>
            <div>中考考生报名号:{{ row.examinee_number }}</div>
            <el-tag size="mini" type="success" slot="reference">{{
        row.name
      }}</el-tag>
          </el-popover>
        </template>
        <template slot="file_pdf" slot-scope="{ row }">
          <el-button type="text" size="small" icon="el-icon-view" @click="showAnnex(row)">附件查看</el-button>
        </template>
        <!-- 状态列 -->
        <template slot="status" slot-scope="{ row }">
          <el-switch v-model="row.status" @change="editStatus(row)" :active-value="1" :inactive-value="2" />
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <!-- <el-link type="primary" :underline="false" icon="el-icon-edit" @click="openEdit(row)"
            v-if="permission.includes('sys:member:edit')">修改
          </el-link> -->
          <el-popconfirm class="ele-action" title="确定要删除此考生报考信息吗？" @confirm="remove(row)">
            <el-link type="danger" slot="reference" :underline="false" icon="el-icon-delete"
              v-if="permission.includes('sys:member:delete')">删除
            </el-link>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <el-drawer title="报名附件信息" size="50%" :visible.sync="drawerAnnex" :direction="direction" :modal="true"
      @close="closePreview">
      <file-preview :fileList="annexList"></file-preview>
    </el-drawer>
    <!-- 编辑弹窗 -->
    <member-edit :data="current" :visible.sync="showEdit" @done="reload" />
    <!-- 导入考试 -->
    <member-import :data="current" :visible.sync="showImport" @done="reload" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MemberEdit from "./member-edit";
import MemberImport from "./member-import";
import FilePreview from "@/components/FilePreview";
export default {
  name: "Member",
  components: { MemberEdit, MemberImport, FilePreview },
  computed: {
    ...mapGetters(["permission"]),
    /**
     * 附件预览数据
     */
    previewOptionData() {
      const cloneData = JSON.parse(JSON.stringify(this.annexList)); // 对源数据深度克隆
      return cloneData;
    },
  },
  data() {
    return {
      // 表格数据接口
      annexList: {},
      drawerAnnex: false,
      direction: "rtl",
      //list 自己的数据存进去就可以
      lists: [],
      url: "/member/index",
      // 表格列配置
      columns: [
        {
          columnKey: "selection",
          type: "selection",
          width: 45,
          align: "center",
          fixed: "left",
        },
        {
          prop: "id",
          label: "编号",
          width: 60,
          align: "center",
          showOverflowTooltip: true,
          fixed: "left",
        },
        {
          prop: "name",
          label: "学生姓名",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 80,
          slot: "name",
        },
        {
          prop: "end_school",
          label: "初中学校名称",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 110,
        },
        {
          prop: "school_address",
          label: "学校所在区县",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 110,
        },
        {
          prop: "address",
          label: "通信地址",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 160,
        },
        {
          prop: "father_mobile",
          label: "联系人手机号1",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: "mother_mobile",
          label: "联系人手机号2",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: "source",
          label: "考生类型",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: "major",
          label: "意向报考专业",
          align: "center",
          showOverflowTooltip: true,
          render: (h, params) => {
            // 创建标签
            return h(
              'div',
              {
                content: '',
                // 编辑对应样式  
                style: {
                  overflow: 'hidden',
                  whiteSpace: 'pre-wrap',
                  webkitBoxOrient: 'vertical',
                  webkitLineClamp: 2,
                  display: '-webkit-box'
                }
              },
              // 展示内容字段 
              params.row.major
            );
          },
          minWidth: 120,
        },
        {
          prop: "file_pdf",
          label: "PDF信息表",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 100,
          slot: "file_pdf",
        },
        // {
        //   prop: 'status',
        //   label: '状态',
        //   align: 'center',
        //   width: 80,
        //   resizable: false,
        //   slot: 'status',
        // },
        {
          prop: "create_time",
          label: "报名时间",
          align: "center",
          showOverflowTooltip: true,
          minWidth: 160,
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          },
        },
        {
          columnKey: "action",
          label: "操作",
          width: 80,
          align: "center",
          resizable: false,
          slot: "action",
          fixed: "right",
        },
      ],
      // 表格搜索条件
      where: {
        gender: "",
        status: "",
      },
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示导入弹窗
      showImport: false,
    };
  },
  methods: {
    showAnnex(row) {
      if (!row.file_pdf || row.file_pdf.length < 0) {
        this.$message({
          message: "无文件，不可查看",
          type: "warning",
        });
        return;
      }
      this.annexList = row;
      // console.log(row)
      this.drawerAnnex = true;
    },
    closePreview() {
      this.drawerAnnex = false;
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({ where: this.where });
    },
    // 上传到本地
    handleExport() {
      const loading = this.$loading({
        lock: true,
        text: "下载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$http
        .get("/member/exportsignup", { params: this.where })
        .then((res) => {
          let list = res.data.data;
          //1 生产中 2 已入库 3 发货货
          const genderMap = {
            1: "男",
            2: "女",
          };
          import("@/vendor/Export2Excel").then((excel) => {
            const tHeader = [
              "姓名",
              "性别",
              "年龄",
              "出生年月",
              "身份证号",
              "中考考生报名号",
              "初中毕业学校",
              "学校所在区县",
              "通信地址",
              "联系人手机号1",
              "联系人手机号2",
              "考生类型",
              "意向报考的自主招生批专业",
              "报名时间",
              // "PDF确认信息表",
            ];
            let data = list.map((item) => {
              return [
                item.name,
                genderMap[item.gender],
                item.age,
                item.birthday,
                item.idcard,
                item.examinee_number,
                item.end_school,
                item.school_address,
                item.address,
                item.father_mobile,
                item.mother_mobile,
                item.source,
                item.major,
                item.create_time,
                // item.file_pdf,
              ];
            });
            excel.export_json_to_excel({
              header: tHeader, //表头 必填
              data, //具体数据 必填
              filename: "报名信息表", //非必填
              autoWidth: true, //非必填
              bookType: "xlsx", //非必填
            });
            loading.close();
          });
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    /* 重置搜索 */
    reset() {
      this.where = {
        gender: "",
        status: "",
      };
      this.reload();
    },
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    /* 显示导入 */
    openImport() {
      this.showImport = true;
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      this.$http
        .post("/member/delete", { id: row.id })
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中的考生报考信息吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          this.$http
            .post("/member/delete", { id: this.selection.map((d) => d.id) })
            .then((res) => {
              loading.close();
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    },
    /* 更改状态 */
    editStatus(row) {
      const loading = this.$loading({ lock: true });
      let params = Object.assign({
        id: row.id,
        status: row.status,
      });
      this.$http
        .post("/member/status", params)
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message({ type: "success", message: res.data.msg });
          } else {
            row.status = !row.status ? 1 : 2;
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
  },
};
</script>

<style scoped></style>
